<template>
  <!--最外层大盒子-->
  <view class="skdp_box">
    <view class="section">
      <picker mode="date" :value="data.date" start="2023-06-01" @change="bindDateChange">
        <view class="picker"></view>
        <view class="picker">日期选择: {{ data.date || '请选择' }}</view>
      </picker>
    </view>
    <!-- 盈亏记录 -->
    <view class="skdp_record">
      <h1>营收详情</h1>
      <view class="record_view">
        <view>
          <text>￥{{ data.day.wxPayQuantity + data.day.pointPayQuantity || 0 }}</text>
          <text>销售金额</text>
        </view>
        <view>
          <text>{{ data.day.ordersQuantity || 0 }}个</text>
          <text>订单数量</text>
        </view>
        <view>
          <text>￥{{ data.day.pointWxQuantity || 0 }}</text>
          <text>消费赠送积分</text>
        </view>
        <view>
          <text>{{ data.day.sales || 0 }}份</text>
          <text>出售菜品</text>
        </view>
        <view>
          <text>￥{{ data.day.wxPayQuantity || 0 }}</text>
          <text>微信支付</text>
        </view>
        <view>
          <text>￥{{ data.day.pointPayQuantity || 0 }}</text>
          <text>积分支付</text>
        </view>
        <view>
          <text>￥{{ data.day.pointRechargeQuantity || 0 }}</text>
          <text>积分充值总额</text>
        </view>
        <view>
          <text>￥{{ data.day.pointGiveQuantity || 0 }}</text>
          <text>赠送积分总额</text>
        </view>
      </view>
      <view class="zhu">注：当天营收 需要隔天查看</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { err, toast } from '@/utils/uniapi';
import { reactive } from 'vue';
import { api } from '@/api/mop_api';
const data = reactive({
  topNav: 0,
  date: '',
  day: { wxPayQuantity: '', pointPayQuantity: '', ordersQuantity: '', pointWxQuantity: '', sales: '', pointRechargeQuantity: '', pointGiveQuantity: '' }
});
async function days() {
  try {
    const statDate = data.date;
    const res = await api.daydata({ statDate });
    if (res.respCode === 200) {
      const day = JSON.parse(res.source);
      data.day = day;
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function bindDateChange(e: any) {
  const date = e.detail.value;
  data.date = date;
  days();
}
</script>

<style scoped>
/* 最外层盒子 */
.skdp_box {
  width: 100%;
  height: 100vh;
  background-color: #f4f4f5;
}
/* 顶部导航 */
.skdp_topNav {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
}
.top_body {
  display: flex;
  width: 95%;
  height: 50rpx;
  margin: 0rpx auto;
  border: 1px solid red;
  border-radius: 10rpx;
}
.top_body text {
  display: block;
  width: 33.33%;
  text-align: center;
}
.top_nav_texts {
  color: red;
}
.top_nav_text {
  color: #fff;
  background-color: rgb(250, 0, 0);
}
.section {
  width: 704rpx;
  margin: 0 auto;
  background-color: #ffffff;
  margin-top: 20rpx;
  border-radius: 20rpx;
}
.picker {
  font-size: 32rpx;
  line-height: 80rpx;
  padding: 10rpx;
  box-sizing: border-box;
}
.zhu {
  width: 704rpx;
  margin: 0 auto;
}
/* 盈亏记录 */
.skdp_record {
  width: 750rpx;
  height: 277rpx;
  background: #f3f4f6;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.skdp_record h1 {
  width: 704rpx;
  height: 46rpx;
  display: block;
  font-size: 31rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 1000;
  color: #111827;
  line-height: 46rpx;
  margin: 30rpx auto 23rpx;
}
.record_view {
  width: 704rpx;
  /* height: 146rpx; */
  background: #ffffff;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  margin: 30rpx auto 23rpx;
  display: flex;
  flex-wrap: wrap;
}
.record_view > view {
  flex: 1;
  text-align: center;
}
.record_view > view > text:nth-of-type(1) {
  width: 150rpx;
  height: 54rpx;
  font-size: 38rpx;
  text-align: center;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  color: #fc3b3e;
  line-height: 54rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 30rpx auto 0rpx;
}
.record_view > view:nth-of-type(1) > text:nth-of-type(1) {
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.record_view > view > text:nth-of-type(2) {
  font-weight: bold;
}
.record_view > view > text {
  display: block;
  font-size: 23rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #000000;
  line-height: 31rpx;
}
/* 菜品销售情况 */
.skdp_cuisine {
  width: 100%;
  height: 485rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.skdp_cuisine > h1 {
  width: 80%;
  height: 46rpx;
  display: inline-block;
  font-size: 31rpx;
  margin: 35rpx 46rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 1000;
  color: #111827;
  line-height: 46rpx;
}
.cuisine_body {
  display: flex;
  flex-wrap: wrap;
}
.cuisine_bodyList {
  width: 91%;
  height: 108rpx;
  display: flex;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin: 0rpx auto;
  background-color: rgb(221, 221, 221);
}
.cuisine_bodyList:nth-of-type(2) {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.cuisine_bodyList view {
  width: 85%;
  margin-left: 20rpx;
  margin-top: 15rpx;
}
.cuisine_bodyList view text {
  display: block;
  width: 573rpx;
  height: 38rpx;
  font-size: 27rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 38rpx;
}
.cuisine_bodyList view text:nth-of-type(2) {
  color: rgb(150, 150, 150);
}
.cuisine_bodyList > image {
  width: 30rpx;
  height: 30rpx;
  margin: auto 0rpx;
}
/* 今日订单 */
.skdp_today {
  width: 750rpx;
  height: 788rpx;
  background: #f4f4f5;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}

.skdp_today h1 {
  width: 704rpx;
  height: 46rpx;
  display: block;
  font-size: 31rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 1000;
  color: #111827;
  line-height: 46rpx;
  margin: 30rpx auto 23rpx;
}
.today_body {
  width: 704rpx;
  display: flex;
  flex-direction: column;
  height: 662rpx;
  margin: 0rpx auto;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(10, 14, 20, 0.05);
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
}
.td_body_top {
  width: 642rpx;
  margin: 20rpx auto;
  height: 46rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.td_body_top text {
  float: left;
}
.td_body_top image {
  width: 30rpx;
  height: 30rpx;
  float: right;
}
.td_body_content {
  display: flex;
  margin: 30rpx auto;
  width: 642rpx;
  height: 154rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.today_image {
  width: 30%;
  margin: auto 0rpx;
}
.td_body_content view {
  width: 50%;
  margin: auto 0rpx;
}
.td_body_content .van-stepper {
  width: 160rpx;
  display: flex;
  border-radius: 30rpx;
}
.today_price {
  width: 20%;
  margin: auto 0rpx;
  height: 46rpx;
  font-size: 35rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ef4444;
  line-height: 40rpx;
}
/* 收支明细 */
.detail {
  width: 704rpx;
  height: 715rpx;
  background: #ffffff;
  margin: 20rpx auto;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(10, 14, 20, 0.05);
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
}
.detail h1 {
  width: 704rpx;
  display: block;
  height: 46rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  padding: 40rpx;
  font-weight: bold;
}
.detail h1:after {
  content: '';
  background-color: red;
  display: inline-block;
  width: 8rpx;
  height: 35rpx;
  position: relative;
  left: -150rpx;
  top: 5rpx;
}
.detail_body {
  display: flex;
  flex-direction: column;
}
.detail_list {
  padding: 10rpx 30rpx;
}
.detail_list text {
  display: block;
}
.detail_list text:nth-of-type(1) {
  width: 642rpx;
  height: 31rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #6b7280;
  line-height: 31rpx;
}
.detail_list text:nth-of-type(2) {
  width: 642rpx;
  height: 38rpx;
  font-size: 30rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 1000;
  margin-top: 10rpx;
  color: #111827;
  line-height: 38rpx;
}
/* 底部盈亏 */
.skdp_btm {
  width: 750rpx;
  height: 452rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.skdp_btm text:nth-of-type(1) {
  width: 100rpx;
  margin: 34rpx auto;
  height: 100rpx;
  display: block;
  border-radius: 50rpx;
  background-color: #fc3b3e;
}
.skdp_btm text:nth-of-type(2) {
  width: 658rpx;
  height: 50rpx;
  font-size: 35rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 48rpx;
  margin: 0rpx auto;
}
.skdp_btm text:nth-of-type(3) {
  width: 658rpx;
  height: 37rpx;
  font-size: 27rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  line-height: 35rpx;
  margin: 0rpx auto;
  margin-top: 15rpx;
}
</style>
